/* ====================================================== 
   <!-- Pagination -->                         
/* ====================================================== */
@import '@poemkit/components/_utils/styles/_variable-and-mixin.scss';

/*
 * 1. Default
 * 2. Paginate WordPress Posts
*/



/* 
 ---------------------------
 1. Default
 ---------------------------
 */ 
.poemkit-pagination__container {
	margin-top: 2.84375rem;
	
	&::before {
		display: table;
		content: "";
		line-height: 0;
	}
	&::after {
		display: table;
		content: "";
		line-height: 0;
		clear: both;
	}
	
	ul {
		font-size: 0; /*Fighting the Space Between Inline Block Elements*/
		
		li {
			display: inline-block;
			font-size: 1rem;/*Fighting the Space Between Inline Block Elements*/

			a,
			> span {
				display: inline-block;
				width: 3.125rem;
				height: 3.125rem;
				padding-top: 0.25rem;
				text-align: center;
				background: none;
				border: none;
				color: $primary-text-color;
				font-variant-ligatures: common-ligatures;
				border-radius: 4px;
				/*Ligatures and contextual forms are ways of combining glyphs to produce more harmonized forms.*/
				margin-bottom: 0;
				font-size: 0.875rem;
				line-height: 3.25;
				margin-top: 0;
				margin-bottom: 2.06818181818rem;
			}	

			a:hover {
				background: #efefef;
				color: #232323;	
			}

			&.is-active {

				a,
				> span {
					border-color: $btn-gradient-color1;
					background-color: $btn-gradient-color1;
					background-image: linear-gradient(to right, $btn-gradient-color1 0%, $btn-gradient-color2 20%, $btn-gradient-color3 100%);
					@include outer-shadow( 'highlight', $highlight-color1 );
					color: #fff;
					font-style: italic;
				}
			}	

			&.is-disabled {
				a,
				> span {
					cursor: not-allowed;
					pointer-events: none;
					user-select: none;
					opacity: .3;
				}

			}



		}	
		
		
	}


}



/* 
 ---------------------------
 2. Paginate WordPress Posts
 ---------------------------
 */ 
.poemkit-page-links {
	margin: 0.875rem 0;
	font-weight: 600;
	position: relative;
	display: block;
	padding: 0.5rem 0.75rem;
	margin-left: -1px;
	line-height: 1.25;
	border: 1px solid #dee2e6;
	
	> span {
		display: inline-block;
		margin: 0 0.13125rem;
		font-weight: normal;
		font-style: italic;
	}
	a {
		display: inline-block;
		margin: 0 0.13125rem;
		font-weight: normal;
		font-style: italic;

		> span {
			color: $primary-text-color;
			background: #F9F9F9;
			padding: 0 0.2625rem;
			border: 1px solid #DDDDDD;
			border-radius: 2px;
		}
	}
}
